//创建context上下文
import React from "react"
let { Provider, Consumer } = React.createContext("默认值")

//Provider组件 必须传递一个叫做value的属性下去

//使用的时候用Consumer包裹要用的元素,传入一个表达式,表达式中传递一个函数,函数的形参就是Provider传递下来的属性

//当没有使用Provider的时候 那么默认的值就会被启用
const A = () => {
    var gift = "react从入门到精通"
    return (
        <fieldset>
            <legend>A组件</legend>
            <h1>A组件</h1>
            {/* <Provider value={gift}> */}
                <B />
            {/* </Provider> */}
        </fieldset>
    );
}
const B = () => {
    return (
        <fieldset>
            <legend>B组件</legend>
            <h1>B组件</h1>
            <C />
        </fieldset>
    );
}
const C = () => {
    return (
        <fieldset>
            <legend>C组件</legend>
            <h1>C组件</h1>
            <D />
        </fieldset>
    );
}
const D = () => {
    return (
        <fieldset>
            <legend>D组件</legend>
            <h1>D组件</h1>
            <Consumer>
                {
                    val => {
                        return <h2>来自于A组件直接传递的属性:{val}</h2>
                    }
                }
            </Consumer>
        </fieldset>
    );
}

export default A;
